<template>
  <div class="order">
    <div style="height: 0;flex-grow: 1;overflow-y: scroll">
      <div class="orderpic" :style="{ overflow: 'hidden', background: 'url('+JSON.parse(orderinfo.car.imgs)[0].url+') center center' , backgroundSize: 'cover'}" >

        <div class="backbtn" @click="$router.go(-1)">返回</div>
      </div>
      <div class="carname">
        {{orderinfo.car.name}} <template v-if="orderinfo.type===4">接机</template><template v-if="orderinfo.type===5">送机</template>
        <span style="color:red;font-size: 14px;">
          <template v-if="orderinfo.state===0">( 待支付 )</template>
          <template v-if="orderinfo.state===1">( 等待确认 )</template>
          <template v-if="orderinfo.state===2">( 用车中 )</template>
          <template v-if="orderinfo.state===3">( 处理中 )</template>
          <template v-if="orderinfo.state===4">( 有违章待处理 )</template>
          <template v-if="orderinfo.state===5">( 已完成 )</template>
          <template v-if="orderinfo.state===-1">( 已取消 )</template>
        </span>
      </div>

      <!--基本参数-->
      <div class="infotitle">费用明细</div>
      <div class="feedetail">
        <div class="lineAll clearfix">
          <span class="fl">总计</span>
          <span class="fr tot" >{{orderinfo.fee}}元</span>
        </div>
        <div class="lineItem clearfix" v-if="orderinfo.type<4" >
          <div class="fl" v-if="orderinfo.type=='1'">按4小时计费<span>{{carinfo.fourfee.fee}}/4小时</span></div>
          <div class="fl" v-if="orderinfo.type=='2'">按8小时计费<span>{{carinfo.eightfee.fee}}/8小时</span></div>
          <div class="fl" v-if="orderinfo.type=='3'">按天<span>{{carinfo.dayfee.fee}}/天</span></div>
          <div class="fr">
            {{fee}}元
            <span> {{countDatestr}} </span>
          </div>
        </div>

        <div class="lineItem clearfix" v-if="orderinfo.need_driver==1 && orderinfo.type<4">
          <div class="fl" v-if="orderinfo.type=='1'">代驾费<span>{{carinfo.fourfee.driver_fee}}元/4小时</span></div>
          <div class="fl" v-if="orderinfo.type=='2'">代驾费<span>{{carinfo.eightfee.driver_fee}}元/8小时</span></div>
          <div class="fl" v-if="orderinfo.type=='3'">代驾费<span>{{carinfo.dayfee.driver_fee}}元/天</span></div>
          <div class="fr">
            {{orderinfo.driver_fee}}
            <span> {{countDatestr}} </span>
          </div>
        </div>
        <div class="lineItem clearfix"  v-if="orderinfo.type<4">
          <div class="fl">服务费<span></span>
          </div>
          <div class="fr">{{orderinfo.service_fee}}元<span></span></div>
        </div>

        <div class="lineItem clearfix"  v-if="orderinfo.type<4">
          <div class="fl">保证金<span></span>
          </div>
          <div class="fr">{{carinfo.despoil}}元<span>取车时支付</span></div>
        </div>

      </div>

      <!--订单联系方式-->
      <div class="infotitle">订车人联系方式</div>
      <div style="padding: 0 40px 20px">
        <md-field>
          <md-input-item
            ref="orderpeople"
            title="联系人"
            v-model="orderpeople"
            placeholder="请填写您的姓名"
            :maxlength="10"
            readonly
          ></md-input-item>
          <md-input-item
            title="手机号"
            type="phone"
            v-model="phone"
            placeholder="填写您的11位手机号码"
            readonly
          ></md-input-item>

        </md-field>
      </div>

      <template v-if="orderinfo.flightnum">
        <div class="infotitle" >航班编号</div>
        <div style="padding: 0 40px 20px;color:#666;text-align: center;line-height: 2;">
            {{orderinfo.flightnum}}
        </div>
      </template>
      <!--订单用车时间-->
      <div class="infotitle">用车时间</div>
      <div style="padding: 0 40px 20px;color:#666;text-align: center;line-height: 2;">
        <div style="font-size: 14px;"> <span style="color:#333">取车时间</span> {{ new Date().setTime(orderinfo.s_date)|moment('YYYY-MM-DD hh:mm')}} </div>
        <div style="font-size: 14px;"  v-if="orderinfo.type<4"> <span style="color:#333">还车时间</span> {{new Date().setTime(orderinfo.e_date)|moment('YYYY-MM-DD hh:mm')}}  </div>
      </div>

      <template v-if="orderinfo.nowsit">

        <div class="infotitle"> 座位 </div>
        <div class="flightbox">

          <div class="catitle"> 常规班次 </div>
          <div class="carmap" >
            <div id="site6" ></div>
            <div id="site5" ></div>
            <div   style="visibility: hidden"></div>
            <div  id="site4" ></div>
            <div style="visibility: hidden"></div>
            <div  style="visibility: hidden"></div>
            <div  id="site3"  >  </div>
            <div  id="site2"  ></div>
            <div  id="site1" ></div>
          </div>

          <template v-for="(item,index) of line">
            <div class="catitle"> 增班班次{{index}} </div>
            <div class="carmap" >
              <div :id="`site${index}`+6" ></div>
              <div :id="`site${index}`+5" ></div>
              <div   style="visibility: hidden"></div>
              <div  :id="`site${index}`+4" ></div>
              <div style="visibility: hidden"></div>
              <div  style="visibility: hidden"></div>
              <div  :id="`site${index}`+3"  >  </div>
              <div  :id="`site${index}`+2"  ></div>
              <div  :id="`site${index}`+1" ></div>
            </div>
          </template>
        </div>

      </template>

      <!-- 联系客服 -->
      <div class="infotitle">联系客服</div>

      <div class="custom"> 18174123678 </div>

    </div>
    <div class="checkout"  v-if="orderinfo.state===0" @click="dopay"> 立即支付 ( {{orderinfo.fee}} 元 )</div>
    <div class="checkout"  v-if="orderinfo.state===4"> 联系客服处理违章 </div>
  </div>
</template>

<script>
import { Toast } from 'mand-mobile'
export default {
  name: 'OrderDetail',
  data () {
    return {
      line: [],
      sitname: ['', '副驾', '二排右侧', '三排右侧', '三排中', '二排左', '三排左'],
      orderpeople: '',
      fee: '',
      phone: '',
      gettype: '1',
      getdj: '2',
      counttype: '3',
      total: 0,
      imgs: [
        'https://fakeimg.pl/375x300/',
        'https://fakeimg.pl/375x300/',
        'https://fakeimg.pl/375x300/'
      ],
      options: [
        {value: '1', label: '上门取车', desc: '取车地址:青秀区东盟商务区'},
        {value: '2', label: '送车上门', desc: '会收取一定的上门服务费'}
      ],
      options2: [
        {value: '1', label: '需要代驾', desc: '根据您的用车时间收费'},
        {value: '2', label: '自驾', desc: '需缴纳一定的保证金'}
      ],
      options3: [
        {value: '1', label: '4小时', desc: '199元'},
        {value: '2', label: '8小时', desc: '299元'},
        {value: '3', label: '按天', desc: '300元'}
      ],
      orderinfo: {},
      countDatestr: {},
      carinfo: {
        dayfee: {
          fee: 0.00,
          driver_fee: 0.00
        },
        fourfee: {
          fee: 0.00,
          driver_fee: 0.00
        },
        eightfee: {
          fee: 0.00,
          driver_fee: 0.00
        }
      }
    }
  },

  created: function () {
    // 获取订单信息
    let oid = this.$route.params.oid
    if (!oid) {
      Toast.failed('没有oid')
      setTimeout(() => {
        this.$router.go(-1)
      }, 2000)
    }
    this.getorderinfo()
  //  this.getcarinfo()
  },
  methods: {
    getorderinfo: async function () {
      let _r = await this.$api.post('/orderinfo', { oid: this.$route.params.oid })

      if (_r.data.state) {
        this.orderinfo = _r.data.data
        // 处理座位
        if (this.orderinfo.nowsit) {
          let _temparr = this.orderinfo.nowsit.split(',')
          _temparr = _temparr.filter(r => r.length >= 2)
          _temparr = _temparr.map(r => r[0])
          let arr = Array.from(new Set(_temparr))
          this.line = arr
          this.$nextTick(() => {
            for (const v of this.orderinfo.nowsit.split(',')) {
              console.log(v)
              console.log(document.getElementById('site' + v))
              document.getElementById('site' + v).classList.add('ci')
            }
          })
        }

        let _d
        if (this.orderinfo.e_date) {
          _d = parseInt((this.orderinfo.e_date - this.orderinfo.s_date) / 1000)
        } else {
          _d = parseInt((Date.now() - this.orderinfo.s_date) / 1000)
        }

        let _day = parseInt(_d / (24 * 60 * 60))
        let _hour = Math.ceil((_d % (24 * 60 * 60)) / (60 * 60))

        this.countDatestr = `${_day}天${_hour}小时`

        this.orderpeople = this.orderinfo.lxname
        this.phone = this.orderinfo.phone
        this.total_fee = this.orderinfo.fee
        this.getcarinfo(this.orderinfo.car)
      } else {
        Toast.failed('获取订单信息失败')
        setTimeout(() => {
          this.$router.go(-1)
        }, 2000)
      }
    },
    getcarinfo: async function (car) {
      Toast.loading('数据加载中')
      let _res = await this.$api.post('/getcarinfo', {cid: this.orderinfo.cid})
      Toast.hide()
      let _car = _res.data.data
      for (let _v of _car.feestanders) {
        if (_v.hours === 24) {
          _car.dayfee = _v
          this.options3[2].desc = _v.fee
        } else if (_v.hours === 8) {
          _car.eightfee = _v
          this.options3[1].desc = _v.fee
        } else if (_v.hours === 4) {
          _car.fourfee = _v
          this.options3[0].desc = _v.fee
        }
      }

      if (_car.imgs) {
        this.imgs = JSON.parse(_car.imgs)
      }
      if (_car.type === 1) {
        _car.cartype = '小轿车'
      } else if (_car.type === 2) {
        _car.cartype = '越野车'
      } else if (_car.type === 3) {
        _car.cartype = '商务车'
      }
      this.carinfo = _car

      let _d = parseInt((this.orderinfo.e_date - this.orderinfo.s_date) / 1000)
      let _day = _d / (24 * 60 * 60)

      this.fee = parseFloat(Math.ceil(_day) * this.carinfo.dayfee.fee)
    },
    dopay: async function () {
      Toast.succeed('添加成功')
      let _payparams = await this.$api.post('/prepay', {
        oid: this.$route.params.oid,
        total_fee: parseFloat(this.total_fee * 100),
        // total_fee: 1,
        desc: this.$store.state.wxuser.nickname + '的' + this.carinfo.name + '租车订单',
        openid: this.$store.state.wxuser.openid
      })

      if (_payparams.data.state) {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', _payparams.data.data,
          function (res) {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              // 使用以上方式判断前端返回,微信团队郑重提示：
              // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              Toast.succeed('支付成功')
              setTimeout(() => {
                this.$router.replace({name: 'OrderList'})
              }, 2000)
            }
          })
      }
    }
  }
}
</script>

<style scoped>
  .feedetail{
    /*background: rgb(244,243,248);*/
    padding:20px 40px;
    font-size: 14px;

  }

  .order{
    display: flex;
    flex-direction: column;
  }
  .orderpic{
    height: 150px;
    position: relative;
  }
  .backbtn{
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    top:25px;
    left:20px;
    font-size: 12px;
    background: rgba(0,0,0,.7);
    color:#fff
  }
  .carname{
    text-align: center;
    line-height: 40px;
  }
  .carLogo{
    text-align: center;
  }
  .carLogo >i {
    font-size: 20px;
    color:#666;
    line-height: 30px;
  }
  .info{
    margin-top: 15px;
    padding:0 20px
  }
  .infotitle{
    text-align: center;
    font-size: 12px;
    line-height: 2;
  }
  .infotitle:after{
    content: "";
    margin:0 auto;
    width: 30px;
    border-bottom:2px solid #ccc;
    display: block;
  }
  .arg{
    display: flex;
    height: 80px;
    margin-top: 15px;
  }
  .arg > div{
    width: 0;
    flex-grow: 1;
    text-align: center;
  }

  .argtitle{
    font-size: 12px;
    display: block;
    line-height: 2;
  }
  .arginfo{
    display: block;
    font-size: 18px;
  }
  .pricebox{
    padding:0 40px;
    margin:10px 0;
  }
  .priceitem{
    margin-bottom: 20px;
  }

  .l2{
    text-align: right;
    font-size: 12px;
    color:#999;
    text-decoration-line:line-through;

  }
  .l3{

    text-align: right;
    font-size: 12px;
    color:#666
  }

  .carinfo{
    padding:10px 40px;
    text-indent: 2em;
    font-size:12px;
    color:#666;
  }
  .checkout{
    height: 50px;
    background: -webkit-linear-gradient(top left,#6a78d0,#7986db);
    color:#fff;
    line-height: 50px;
    text-align: center;

  }
  .custom{
    text-align: center;
    line-height: 40px;
  }
  .lineAll > span:first-of-type{
    font-size: 16px;
  }
  .tot{
    font-size: 16px;
    color:#6a78d0;
    font-weight: 500;
  }
  .feedetail .lineItem{
    color:rgb(162,162,162);
    margin: 5px 0;
  }

  .lineItem span{
    font-size: 12px;
    display: block;
    transform: scale(.9);

  }
  .lineItem > .fr  span{
    text-align: right;
  }
  .flightbox{
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  .carmap{
    width: 200px;
    height: 80px;
    border:1px solid #ccc;
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    background: url('../assets/nplace.jpg') no-repeat  center center;
  }
  .carmap > div{
    width: 50px;
    height: 20px;
    position: relative;
    border:1px solid transparent;
  }

  .carmap > div:after{
    content:'';
    margin: 0 auto;
    height: 20px;
    width: 20px;
    display: block;
    border-radius: 50%;
    border:1px solid #ccc
  }

  #siteD:after{
    content:'驾驶位';
    transform: scale(.75);
    display: block;
    font-size: 12px;
  }

  .ci:after{
    background: rgba(250,4,9,.7);
  }
  .carmap > div:last-child{
    position: relative;
    bottom:10px
  }
  .carmap > div:nth-last-child(2){
    position: relative;
    bottom:10px
  }

</style>
